<template>
    <div style="display: flex;width: 100%;height: 100vh; ">
        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 120px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 显示的数据 -->
                    <div :style='样式1'>
                        <h4>显示的数据 : </h4>
                        <spen :style='样式2'>英:data,类型:array,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.data' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- Table 的高度， 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 -->
                    <div :style='样式1'>
                        <h4>Table 的高度 </h4>
                        <spen :style='样式2'>英:height,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.height' size='small'
                            @change="提交改变">
                            <el-radio label="100px">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Table 的最大高度。 合法的值为数字或者单位为 px 的高度。 -->
                    <div :style='样式1'>
                        <h4>Table 的最大高度</h4>
                        <spen :style='样式2'>英:max-height,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["max-height"]'
                            size='small' @change="提交改变">
                            <el-radio label="150px">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否为斑马纹 table -->
                    <div :style='样式1'>
                        <h4>是否为斑马纹 table : </h4>
                        <spen :style='样式2'>英:stripe,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.stripe' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否带有纵向边框 -->
                    <div :style='样式1'>
                        <h4>是否带有纵向边框 : </h4>
                        <spen :style='样式2'>英:border,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.border' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Table 的尺寸 -->
                    <div :style='样式1'>
                        <h4>Table 的尺寸 : </h4>
                        <spen :style='样式2'>英:size,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.size' size='small'
                            @change="提交改变">
                            <el-radio label="large">大 </el-radio>
                            <el-radio label="default">中 </el-radio>
                            <el-radio label="small">小</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 列的宽度是否自撑开 -->
                    <div :style='样式1'>
                        <h4>列的宽度是否自撑开 : </h4>
                        <spen :style='样式2'>英:fit,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.fit' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示表头 -->
                    <div :style='样式1'>
                        <h4>是否显示表头 : </h4>
                        <spen :style='样式2'>英:show-header,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["show-header"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否要高亮当前行 -->
                    <div :style='样式1'>
                        <h4>是否要高亮当前行 : </h4>
                        <spen :style='样式2'>英:highlight-current-row,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["highlight-current-row"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>


                    <!-- 是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示。 -->
                    <div :style='样式1'>
                        <h4>是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示。 : </h4>
                        <spen :style='样式2'>英:show-overflow-tooltip,类型:boolean \,默认:参考 tooltip-options</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["show-overflow-tooltip"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <h2 style="margin-top: 15px;background-color:rgb(63, 45, 45);color: aliceblue;">-------触发的事件 -----</h2>
                    <!-- 当用户手动勾选数据行的 Checkbox 时触发的事件 -->
                    <div :style='样式1'>
                        <h4>当用户手动勾选数据行的 Checkbox 时触发的事件 : </h4>
                        <spen :style='样式2'>英:select,类型:selection, row,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.select' size='small'
                            @change="提交改变">
                            <el-radio label="手动勾选数据行">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当用户手动勾选全选 Checkbox 时触发的事件 -->
                    <div :style='样式1'>
                        <h4>当用户手动勾选全选 Checkbox 时触发的事件 : </h4>
                        <spen :style='样式2'>英:select-all,类型:selection,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["select-all"]'
                            size='small' @change="提交改变">
                            <el-radio label="手动勾选全">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当选择项发生变化时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当选择项发生变化时会触发该事件 : </h4>
                        <spen :style='样式2'>英:selection-change,类型:selection,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["selection-change"]'
                            size='small' @change="提交改变">
                            <el-radio label="选择项发生变化">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当单元格 hover 进入时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当单元格 hover 进入时会触发该事件 : </h4>
                        <spen :style='样式2'>英:cell-mouse-enter,类型:row, column, cell, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["cell-mouse-enter"]'
                            size='small' @change="提交改变">
                            <el-radio label="单元格hover进入">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当单元格 hover 退出时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当单元格 hover 退出时会触发该事件 : </h4>
                        <spen :style='样式2'>英:cell-mouse-leave,类型:row, column, cell, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["cell-mouse-leave"]'
                            size='small' @change="提交改变">
                            <el-radio label="单元格hover退出">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某个单元格被点击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某个单元格被点击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:cell-click,类型:row, column, cell, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["cell-click"]'
                            size='small' @change="提交改变">
                            <el-radio label="某个单元格被点击">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某个单元格被双击击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某个单元格被双击击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:cell-dblclick,类型:row, column, cell, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["cell-dblclick"]'
                            size='small' @change="提交改变">
                            <el-radio label="某个单元格被双击">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某个单元格被鼠标右键点击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某个单元格被鼠标右键点击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:cell-contextmenu,类型:row, column, cell, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["cell-contextmenu"]'
                            size='small' @change="提交改变">
                            <el-radio label="某个单元格被鼠标右键点击">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某一行被点击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某一行被点击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:row-click,类型:row, column, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["row-click"]' size='small'
                            @change="提交改变">
                            <el-radio label="某一行被点击">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某一行被鼠标右键点击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某一行被鼠标右键点击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:row-contextmenu,类型:row, column, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["row-contextmenu"]'
                            size='small' @change="提交改变">
                            <el-radio label="某一行被鼠标右键点击">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某一行被双击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某一行被双击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:row-dblclick,类型:row, column, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["row-dblclick"]'
                            size='small' @change="提交改变">
                            <el-radio label="某一行被双击">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某一列的表头被点击时会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某一列的表头被点击时会触发该事件 : </h4>
                        <spen :style='样式2'>英:header-click,类型:column, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["header-click"]'
                            size='small' @change="提交改变">
                            <el-radio label="某一列的表头被点击">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当某一列的表头被鼠标右键点击时触发该事件 -->
                    <div :style='样式1'>
                        <h4>当某一列的表头被鼠标右键点击时触发该事件 : </h4>
                        <spen :style='样式2'>英:header-contextmenu,类型:column, event,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["header-contextmenu"]'
                            size='small' @change="提交改变">
                            <el-radio label="某一列的表头被鼠标右键点击">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当表格的排序条件发生变化的时候会触发该事件 -->
                    <div :style='样式1'>
                        <h4>当表格的排序条件发生变化的时候会触发该事件 : </h4>
                        <spen :style='样式2'>英:sort-change,类型:{ column, prop, order },默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["sort-change"]'
                            size='small' @change="提交改变">
                            <el-radio label="表格的排序条件发生变化">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>


                </el-scrollbar>

            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <el-table :data="绑定列表值" style="width: 90%; margin:auto ; margin-top:20px " v-bind="属性">
                <el-table-column type="selection" width="55" /> <!--  多选例子 -->
                <el-table-column prop="data" label="Data" show-overflow-tooltip />
                <el-table-column align="right" width="180">
                    <template #header> <!--  头部范围 -->
                        <el-input v-model="输入框数据" size="small" placeholder="Type to search" />
                    </template>
                    <template #default="scope"> <!--  列表范围 并且用 scope 来获取行数据 -->
                        <el-button size="small" @click="左按钮事件(scope.$index, scope.row)">左按钮</el-button>
                        <el-button size="small" type="danger" @click="右按钮事件(scope.$index, scope.row)">右按钮</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 25 }" type="textarea" placeholder="代码展示"
                style="width: 98%;margin-top: 20px;" />
        </div>
    </div>
</template>
<script setup>

import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 = proxy.router

const 绑定列表值 = [
	{
	  data: '不错'
	},
	{
	  data: '这是一句非常长的话 非常好 非常的不错 非常不错的例子 这是一句非常长的话 非常好 非常的不错 非常不错的例子 非常的不错 非常不错的例子'
	},
	{
	  data: '2016-05-04',
	},

  ]

  // 下面是两个按钮的方法
  const 左按钮事件 = (index, row) => {
	console.log(index, row)
  }
  const 右按钮事件 = (index, row) => {
	console.log(index, row)
  }
  const 输入框数据 = ref('') //头部input关联的数据

const 代码 = ref('')
const 提交改变 = async () => {
    let 结果 = await 提交方法("组件修改", 组件名.value, 属性.value, 事件.value)
    代码.value = 结果
}

const 组件名 = ref('表格')
const 属性 = ref({
    //data: null,//显示的数据
    height: null,//Table 的高度， 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
    "max-height": null,//Table 的最大高度。 合法的值为数字或者单位为 px 的高度。
    stripe: null,//是否为斑马纹 table
    border: null,//是否带有纵向边框
    size: null,//Table 的尺寸
    fit: true,//列的宽度是否自撑开
    "show-header": true,//是否显示表头
    "highlight-current-row": null,//是否要高亮当前行
    "scrollbar-always-on": null,//总是显示滚动条
    "show-overflow-tooltip": null,//是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示。

})
const 事件 = ref({
    select: null,//当用户手动勾选数据行的 Checkbox 时触发的事件
    "select-all": null,//当用户手动勾选全选 Checkbox 时触发的事件
    "selection-change": null,//当选择项发生变化时会触发该事件
    "cell-mouse-enter": null,//当单元格 hover 进入时会触发该事件
    "cell-mouse-leave": null,//当单元格 hover 退出时会触发该事件
    "cell-click": null,//当某个单元格被点击时会触发该事件
    "cell-dblclick": null,//当某个单元格被双击击时会触发该事件
    "cell-contextmenu": null,//当某个单元格被鼠标右键点击时会触发该事件
    "row-click": null,//当某一行被点击时会触发该事件
    "row-contextmenu": null,//当某一行被鼠标右键点击时会触发该事件
    'row-dblclick': null,//当某一行被双击时会触发该事件
    'header-click': null,//当某一列的表头被点击时会触发该事件
    'header-contextmenu': null,//当某一列的表头被鼠标右键点击时触发该事件
    'sort-change': null,//当表格的排序条件发生变化的时候会触发该事件

})

const 重置组件 = () => {
    let 原生属性 = {
    //data: null,//显示的数据
    height: null,//Table 的高度， 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
    "max-height": null,//Table 的最大高度。 合法的值为数字或者单位为 px 的高度。
    stripe: null,//是否为斑马纹 table
    border: null,//是否带有纵向边框
    size: null,//Table 的尺寸
    fit: true,//列的宽度是否自撑开
    "show-header": true,//是否显示表头
    "highlight-current-row": null,//是否要高亮当前行
    "scrollbar-always-on": null,//总是显示滚动条
    "show-overflow-tooltip": null,//是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示。
    }
    属性.value = 原生属性
    let 原生事件 = {
        select: null,//当用户手动勾选数据行的 Checkbox 时触发的事件
    "select-all": null,//当用户手动勾选全选 Checkbox 时触发的事件
    "selection-change": null,//当选择项发生变化时会触发该事件
    "cell-mouse-enter": null,//当单元格 hover 进入时会触发该事件
    "cell-mouse-leave": null,//当单元格 hover 退出时会触发该事件
    "cell-click": null,//当某个单元格被点击时会触发该事件
    "cell-dblclick": null,//当某个单元格被双击击时会触发该事件
    "cell-contextmenu": null,//当某个单元格被鼠标右键点击时会触发该事件
    "row-click": null,//当某一行被点击时会触发该事件
    "row-contextmenu": null,//当某一行被鼠标右键点击时会触发该事件
    'row-dblclick': null,//当某一行被双击时会触发该事件
    'header-click': null,//当某一列的表头被点击时会触发该事件
    'header-contextmenu': null,//当某一列的表头被鼠标右键点击时触发该事件
    'sort-change': null,//当表格的排序条件发生变化的时候会触发该事件
    }
    事件.value = 原生事件
    提交改变()
}


const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')





</script>
<style scoped></style>
